<template>
	<view class="">
		<w-navbar :isBack="false">
			<template #w-navbar-title>
				<view class="top_box">
					<view class="left">
						<image src="../../static/image/logo.png" mode=""></image>
					</view>
					<view class="right">
						<image style="width: 40rpx;margin: 0 0 0 12rpx;" src="../../static/image/laba.png" mode="widthFix"></image>
						<!-- <swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000">
							<swiper-item class="swiper-item" v-for="(item,index) in swiper_notice" :key="index">
								<view class="swiper-item-text">{{item}}</view>
							</swiper-item>
						</swiper> -->
						<u-notice-bar icon=" " color="black" bgColor="white" :text="swiper_notice" url="/pages/notice/index"></u-notice-bar>
					</view>
				</view>
			</template>
		</w-navbar>
		<w-container isTabbar>
			<template>
				<view class="content">
					<view class="header_box">
						<swiper class="swiper_box" :autoplay="true" :indicator-dots="true" :interval="3000" :duration="1000">
							<swiper-item class="swiper_item_box" @click="goBannerDetail(item)" v-for="(item,index) in banner_list" :key="index">
								<image :src="ossURL+item.image" mode=""></image>
							</swiper-item>
						</swiper>
						<!-- <image src="../../static/index/swiper1.jpg" mode="widthFix"></image> -->
					</view>
					<view class="btn_box">
						<view @click="menuJump('/pages/goods/grounding')" class="btn_item" v-if="show_auth_info.is_show_add_goods">
							<!-- <view class="text1">
								上架
							</view>
							<view class="text2">
								On the shelves
							</view>
							<view class="text3">
							</view> -->
							<image src="../../static/image/shangjia.png" mode="widthFix"></image>
						</view>
						<view @click="menuJump('/pages/order/order_list?order_source=1')" class="btn_item" v-if="show_auth_info.is_show_cai_gou">
							<!-- <view class="text1">
								采购
							</view>
							<view class="text2">
								Make a purchase
							</view>
							<view class="text3">
								<image src="../../static/icon/add.png" mode=""></image>
							</view> -->
							<image src="../../static/image/caigou.png" mode="widthFix"></image>
						</view>
						<view @click="menuJump('/pages/goods/classification')" class="btn_item" v-if="show_auth_info.is_show_fen_lei">
						<!-- 	<view class="text1">
								产品
							</view>
							<view class="text2">
								Products
							</view>
							<view class="text3">
								<image src="../../static/icon/add.png" mode=""></image>
							</view> -->
							<image src="../../static/image/chanpin.png" mode="widthFix"></image>
						</view>
						<view @click="menuJump('/pages/warehouse/index')" class="btn_item" v-if="show_auth_info.is_show_chang_ku">
							<!-- <view class="text1">
								仓库
							</view>
							<view class="text2">
								Warehouse
							</view>
							<view class="text3">
								<image src="../../static/icon/add.png" mode=""></image>
							</view> -->
							<image src="../../static/image/cangku.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</template>
		</w-container>
		
		<w-tabbar></w-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiper_notice:'',
				banner_list:[],
				show_auth_info:{},
			}
		},
		watch: {
		
		},
		created() {
			if(!uni.getStorageSync('token')){
				uni.reLaunch({
					url:'/pages/login/index'
				})
			}
		},
		onLoad() {
			this.get_index_info()
		},
		onShow() {
		},
		methods: {
			menuJump(url){
				uni.navigateTo({
					url
				})
			},
			
			async get_index_info() {
				uni.showLoading({
					title: '飞速加载中...'
				})
				const res = await this.$http({
					url: '/addons/shop/api.common/get_index_info',
					data: {}
				})
				uni.hideLoading()
				if (res.code == 1) {
					this.banner_list = res.data.banner_list
					this.show_auth_info = res.data.show_auth_info
					this.swiper_notice = res.data.swiper_notice
				}
			},
			goBannerDetail(item){
				uni.navigateTo({
					url:'/pages/rich_text/index',
					success: (res) => {
						console.log('跳转成功')
						res.eventChannel.emit('jumpData',item)
					},
					events:{
						// getData:(val)=>{
						// 	console.log(val)
						// }
					}
				})
			}
		}
			
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
	
	/deep/.u-notice-bar{
		padding: 0 !important;
	}
	
	.top_box{
		position: relative;
		width: 100%;
		height: 90%;
		display: flex;
		align-items: center;
		
		.left{
			margin: 0 20rpx;
			margin-left: 40rpx;
			height: 100%;
			width: 25%;
			image{
				margin: 5% 0;
				width: 100%;
				height: 80%;
			}
		}
		.right{
			margin: 5% 0;
			height: 90%;
			display: flex;
			align-items: center;
			border: 2rpx solid rgb(54,48,52);
			width: 60%;
			border-radius: 10rpx;
			.iconfont{
				margin: 0 12rpx;
			}
			
			.swiper{
				overflow: hidden;
				width: 100%;
				box-sizing: border-box;
				padding-right: 20rpx;
				height: 100%;
				
				.swiper-item{
					display: flex;
					align-items: center;
				}
				.swiper-item-text{
					white-space: nowrap;
					font-size: 28rpx;
					height: 40rpx;
					line-height: 40rpx;
				}
			}
		}
	}
	
	.content{
		width: 100%;
		
		
		.header_box{
			
			box-sizing: border-box;
			padding: 30rpx 40rpx;
			width: 100%;
			image{
				width: 100%;
				height: 100%;
			}
			
			.swiper_box{
				width: 100%;
				height: 500rpx;
				
				.swiper_item_box{
					width: 100%;
					height: 500rpx;
				}
			}
		}
		.btn_box{
			box-sizing: border-box;
			padding: 0 30rpx 30rpx 30rpx;
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			
			.btn_item{
				width: 44%;
				margin: 20rpx 3%;
				box-sizing: border-box;
				background-color: rgb(247,247,247);
				border-radius: 10rpx;
				
				image{
					width: 100%;
					height: 100%;
				}
				.text1{
					font-size: 40rpx;
					letter-spacing: 20rpx;
					font-weight: bold;
				}
				
				.text2{
					white-space: nowrap;
					font-size: 28rpx;
					margin-top: 20rpx;
					color: #999;
				}
				
				.text3{
					margin-top: 60rpx;
					width: 80rpx;
					height: 80rpx;
				}
			}
		}
	}
</style>